<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义表明细</title>
        <#include "/pubHeadStyle.html">
    </head>
    <body>
        <style>
            .details input {
                border: none;
                background: none;
                width: 60px;
                pointer-events: none;
            }

            .details .layui-form-label {
                color: blue;
            }

            #LAY_app {
                overflow: hidden;
            }

            .layui-layer-iframe {
                overflow-y: hidden;
            }

            .layui-table-body {
                overflow-x: hidden;
            }
        </style>
        <form class="layui-form" lay-filter="formData" style="padding: 0 10px;">
            <div class="layui-btn-container" style="position: absolute;bottom: 0;left: 45%;">
                <button class="layui-btn layui-btn-danger" id="return">关闭</button>
            </div>
            <div style="height: 480px;overflow-y: auto">
                <div class="layui-row" style="margin-top: 15px;">
                    <div class="layui-row details" style="margin-top: 15px;">
                        <table>
                            <tr>
                                <td>
                                    <label class="layui-form-label" style="width: auto">表名: </label>
                                </td>
                                <td>
                                    <input type="text" name="name">
                                </td>
                                <td>
                                    <label class="layui-form-label" style="width: auto">注释: </label>
                                </td>
                                <td>
                                    <input type="text" name="tableDesc" style="width: 115px">
                                </td>
                                <td>
                                    <label class="layui-form-label" style="width: auto">是否主表: </label>
                                </td>
                                <td>
                                    <input type="text" name="isMain">
                                </td>
                                <td class="mainTable">
                                    <label class="layui-form-label" style="width: auto">所属主表: </label>
                                </td>
                                <td class="mainTable">
                                    <input type="text" name="mainTableName">
                                </td>
                                <td>
                                    <label class="layui-form-label" style="width: auto">是否外部表: </label>
                                </td>
                                <td>
                                    <input type="text" name="isExternal">
                                </td>
                                <td>
                                    <label class="layui-form-label" style="width: auto">是否公开: </label>
                                </td>
                                <td>
                                    <input type="text" name="isPublic">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <table id="detailed" lay-filter="detailed"></table>
                <div class="childTable">
                    <p style="margin:0 auto;text-align: center;padding:15px 0;">子表列表</p>
                    <table id="childTable" lay-filter="childTable"></table>
                </div>
            </div>
        </form>
        <script type="text/html" id="operation">
            <a class="layui-btn layui-btn-xs" lay-event="deailed">明细</a>
        </script>
        <script>
            layui.config({
                base: serverPath.formPath + staticPath.formPath //静态资源所在路径
            }).extend({
                index: 'index' //主入口模块
            }).use(['index', 'setter', 'commons', 'table', 'form', 'jquery'], function () {
                var table = layui.table
                    , form = layui.form;
                var $ = layui.$;
                var setter = layui.setter;
                var tableId = '${tableId}';
                //关闭弹窗
                var index = parent.layer.getFrameIndex(window.name);
                $('#return').click(function () {
                    parent.layer.close(index);
                });
                $.ajax({
                    url: serverPath.formPath + setter.formLinkPath + 'table/getTableDetail?tableId=' + tableId,
                    dataType: 'json',
                    success: function (data) {
                        //表单初始赋值
                        var returnData = data.data;
                        var tableInfo = returnData.table;
                        if (tableInfo.isMain == 1) {
                            $(".mainTable").css("display", "none");
                            $(".childTable").css("display", "block")
                        } else {
                            $(".childTable").css("display", "none")
                        }
                        form.val('formData', {
                            "name": tableInfo.tableName,
                            "tableDesc": tableInfo.tableDesc,
                            "mainTableName": returnData.mainTableName,
                            "isMain": tableInfo.isMain == 1 ? "是" : "否",
                            "isExternal": tableInfo.isExternal == 1 ? "是" : "否",
                            "isPublic": tableInfo.isPublic == 1 ? "是" : "否",
                        });
                        //表格渲染数据
                        table.render({
                            elem: '#detailed',
                            data: returnData.fields,
                            limit: returnData.fields.length,
                            cols: [[
                                {type: 'numbers', title: '序号', align: 'center'}
                                , {field: 'fieldName', title: '字段名称', align: 'center'}
                                , {field: 'fieldDesc', title: '字段注释', align: 'center'}
                                , {
                                    field: 'fieldType', title: '字段类型', align: 'center',
                                    templet: function (d) {
                                        if (d.fieldType == "varchar") {
                                            return '文字（' + d.charLen + ')';
                                        } else if (d.fieldType == "number") {
                                            return '数字（' + d.intLen + '),(' + d.decimalLen + ')';
                                        } else if (d.fieldType == "date") {
                                            return '日期'
                                        } else if (d.fieldType == "clob") {
                                            return '大文本';
                                        }
                                        return '';
                                    }
                                }
                                , {
                                    field: 'isRequired', title: '必填', align: 'center',
                                    templet: function (d) {
                                        if (d.isRequired == 1) {
                                            return '√';
                                        }
                                        return '';
                                    }
                                }
                                , {
                                    field: 'isList', title: '显示到列表', align: 'center',
                                    templet: function (d) {
                                        if (d.isList == 1) {
                                            return '√';
                                        }
                                        return '';
                                    }
                                }
                                , {
                                    field: 'isQuery', title: '作为查询条件', align: 'center',
                                    templet: function (d) {
                                        if (d.isQuery == 1) {
                                            return '√';
                                        }
                                        return '';
                                    }
                                }
                                , {
                                    field: 'isFlowVar', title: '是否流程变量', align: 'center',
                                    templet: function (d) {
                                        if (d.isFlowVar == 1) {
                                            return '√';
                                        }
                                        return '';
                                    }
                                }
                            ]]
                        });
                        if (returnData.subList !== undefined) {
                            //子表数据渲染
                            table.render({
                                elem: '#childTable',
                                data: returnData.subList,
                                limit: returnData.subList.length,
                                cols: [[
                                    {type: 'numbers', title: '序号', align: 'center'}
                                    , {field: 'tableName', title: '表名', align: 'center'}
                                    , {field: 'tableDesc', title: '注释', align: 'center'}
                                    , {fixed: 'right', title: '明细', toolbar: '#operation', width: 150, align: 'center'}
                                ]]
                            });
                        }
                    }
                });
                table.on('tool(childTable)', function (obj) {
                    var data = obj.data;
                    switch (obj.event) {
                        case 'deailed':
                            var tableId = obj.data.tableId;
                            layer.open({
                                type: 2,
                                title: "明细",
                                shade: 0.3,
                                area: ['100%', '80%'],
                                content: serverPath.formPath + setter.formLinkPath + 'table/view/detailed?tableId=' + tableId
                            });
                            break;
                    }
                })
            });
        </script>
    </body>
</html>